<template>
  <div class="relative wh-full">
    <video
      src="@/assets/images/light-video-bg.mp4"
      style="
        object-fit: contain;
        height: 100%;
        position: absolute;
        top: 0;
        left: calc(50% + 100px);
        transform: translateX(-50%);
      "
      autoplay
      loop
      muted
    ></video>
    <div
      class="left absolute left-0 top-0 box-border h-full w-580 flex-col flex-shrink-0 justify-center bg-#FFF px-110"
    >
      <img class="mb-40 h-80 w-80" src="@/assets/images/logo.png" />
      <div class="text-34 color-#060312 lh-44">欢迎使用</div>
      <div class="text-34 color-#060312 lh-44">算法测评平台</div>
      <n-form ref="$form" :model="model" label-placement="left" class="mt-42" :disabled="disable">
        <n-form-item path="username" :rule="[{ required: true, message: '请输入帐号' }]">
          <n-input v-model:value="model.username" placeholder="请输入帐号">
            <template #prefix>
              <img src="@/assets/images/light-user.png" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item path="password" :rule="[{ required: true, message: '请输入密码' }]">
          <n-input
            v-model:value="model.password"
            type="password"
            show-password-on="click"
            placeholder="请输入密码"
          >
            <template #prefix>
              <img src="@/assets/images/light-lock.png" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item path="isRemember">
          <n-checkbox v-model:checked="model.isRemember">
            <div class="text-14 color-#68717C">记住密码</div>
          </n-checkbox>
        </n-form-item>
        <n-form-item>
          <n-button
            class="mt-44 w-100%"
            type="primary"
            attr-type="button"
            :loading="loading"
            @click="handleLogin"
          >
            登录
          </n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>
<script setup lang="jsx">
import { useUserStore, useAppStore, usePermissionStore } from '@/store'
import { initUserAndPermissions } from '@/router'
defineOptions({
  name: 'Login',
})
// const title = import.meta.env.VITE_TITLE
const appStore = useAppStore()
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const $form = ref(null)
const model = ref({
  username: null,
  password: null,
  isRemember: false,
})
const loading = ref(false)
function handleLogin(e) {
  e.preventDefault()
  $form.value.validate((errors) => {
    if (!errors) {
      loading.value = true
      userStore
        .login(model.value)
        .then(() => {
          onLoginSuccess()
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}
const disable = ref(false)
async function onLoginSuccess() {
  disable.value = true
  $message.loading('登录中...', { key: 'login' })
  try {
    await initUserAndPermissions()
    $message.success('登录成功', { key: 'login' })
    disable.value = false
    if (route.query.redirect) {
      const path = route.query.redirect
      delete route.query.redirect
      router.push({ path, query: route.query })
    } else {
      // const permissionStore = usePermissionStore()
      router.push('/')
    }
  } catch (error) {
    disable.value = false
    console.error(error)
    $message.destroy('login')
  }
}
</script>
<style lang="scss" scoped>
:deep() {
  .n-input {
    --n-height: 52px !important;
    .n-input__prefix {
      margin-right: 12px;
    }
  }
  .n-button {
    --n-height: 52px !important;
  }
  .n-checkbox {
    --n-size: 16px !important;
    --n-border-radius: 4px !important;
  }
  .n-form-item {
    --n-feedback-height: 20px !important;
    --n-blank-height: 20px !important;
  }
}
</style>
